<template>
    <div
        class="absolute w-full h-full top-0 left-0 flex justify-center items-center bg-[rgba(0,0,0,0.4)] backdrop-blur-sm select-none">
        <div class="w-[54rem] h-[42rem] box relative">
            <!-- 背包标题 -->
            <div class="w-full absolute top-0">
                <p class="absolute font-serif top-6 left-[25.7rem] text-amber-500 font-bold text-3xl tracking-widest">
                    背包
                </p>
                <button @click="emit(`showName`)"
                    class="absolute top-[6.5rem] left-[47.5rem] flex h-8 w-8 items-center justify-center rounded-full bg-orange-300 text-white hover:scale-110 transition-all shadow-[inset_0px_-4px_4px_0px_#f05b5b,0px_0px_0px_2px_#f9d1d1,0px_4px_0px_0px_#A60000]">
                    <svg t="1724252642050" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="43079" width="20" height="20">
                        <path
                            d="M773.41 196.21c15.05-15.01 39.41-14.98 54.42 0.07 14.07 14.11 15.05 36.63 2.24 51.9l-2.25 2.44-577.2 577.2c-15.05 15.01-39.41 14.98-54.42-0.07-14.07-14.11-15.05-36.63-2.24-51.9l2.25-2.44 577.2-577.2z"
                            p-id="43080" fill="#ffffff"></path>
                        <path
                            d="M196.21 196.21c14.12-14.12 36.68-15.09 51.97-2.25l2.44 2.25 577.2 577.2c15.01 15.05 14.98 39.41-0.07 54.42-14.11 14.07-36.63 15.05-51.9 2.24l-2.44-2.25-577.2-577.2c-15.03-15.03-15.03-39.39 0-54.41z"
                            p-id="43081" fill="#ffffff"></path>
                    </svg>
                </button>
                <div v-if="backpackList.length > 0"
                    class="absolute flex items-center w-40 px-2 py-1 h-fit top-[7.7rem] left-[3.5rem] rounded-full">
                    <div class="flex w-fit px-5 items-center justify-center ml-2 absolute top-[1px]">
                        <img src="../assets/imgs/jb.png" class="absolute w-full h-9 top-0 z-0">
                        <svg t="1724322491147" class="icon z-50" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="10705" width="40" height="40">
                            <path
                                d="M512 896c200.298667 0 362.666667-152.810667 362.666667-341.333333s19.050667-192.533333-362.666667-192.533334S149.333333 366.144 149.333333 554.666667s162.368 341.333333 362.666667 341.333333z"
                                fill="#FF5C00" p-id="10706"></path>
                            <path
                                d="M149.333333 490.666667a362.666667 341.333333 0 1 0 725.333334 0 362.666667 341.333333 0 1 0-725.333334 0Z"
                                fill="#FFCC00" p-id="10707"></path>
                            <path
                                d="M820.224 310.698667a332.288 332.288 0 0 1 31.146667 59.349333L404.629333 816.789333a373.12 373.12 0 0 1-64.853333-25.642666z m-189.269333-142.570667c57.621333 18.816 108.629333 50.922667 148.906666 92.416L284.16 756.266667c-46.570667-35.456-83.626667-81.514667-107.008-134.314667z"
                                fill="#FFE3B6" p-id="10708"></path>
                            <path d="M192 480a320 288 0 1 0 640 0 320 288 0 1 0-640 0Z" fill="#FF7325" p-id="10709">
                            </path>
                            <path
                                d="M213.333333 480a298.666667 266.666667 0 1 0 597.333334 0 298.666667 266.666667 0 1 0-597.333334 0Z"
                                fill="#FFB329" p-id="10710"></path>
                            <path
                                d="M808.533333 512c-17.706667 132.181333-143.722667 234.666667-296.533333 234.666667s-278.826667-102.485333-296.533333-234.666667z"
                                fill="#FF9B1A" p-id="10711"></path>
                            <path
                                d="M512 213.333333c108.074667 0 202.730667 51.242667 255.168 128H256.853333c52.437333-76.757333 147.093333-128 255.168-128z"
                                fill="#FFCC00" p-id="10712"></path>
                            <path
                                d="M587.648 510.037333l94.72-13.930666 0.298667 40.938666c-6.4 25.045333-16.426667 45.973333-30.165334 62.762667a129.92 129.92 0 0 1-51.093333 38.037333c-20.352 8.533333-46.250667 12.821333-77.674667 12.821334-38.144 0-69.290667-5.205333-93.482666-15.637334-24.170667-10.432-45.034667-28.757333-62.592-55.018666-17.557333-26.24-26.325333-59.84-26.325334-100.8 0-54.613333 15.445333-96.554667 46.314667-125.888 30.890667-29.333333 74.56-43.989333 131.050667-43.989334 44.202667 0 78.954667 8.405333 104.256 25.194667 9.962667 6.613333 28.501333 18.346667 55.594666 35.2-0.341333 16.469333-0.085333 30.549333 0.768 42.197333l-95.744 20.053334c-3.349333-10.069333-6.869333-17.408-10.538666-22.058667a61.482667 61.482667 0 0 0-22.250667-18.005333 67.328 67.328 0 0 0-29.44-6.314667c-24.576 0-43.413333 9.301333-56.490667 27.904-9.898667 13.802667-14.848 35.477333-14.848 65.024 0 36.608 5.909333 61.696 17.706667 75.264 11.818667 13.589333 28.416 20.373333 49.792 20.373333 20.736 0 36.416-5.482667 47.04-16.426666 10.602667-10.944 18.304-26.858667 23.104-47.701334z"
                                fill="#FF5C00" p-id="10713"></path>
                            <path
                                d="M587.648 467.370667L682.666667 494.378667c-6.4 25.045333-16.426667 45.973333-30.165334 62.762666a129.92 129.92 0 0 1-51.093333 38.037334c-20.352 8.533333-46.250667 12.821333-77.674667 12.821333-38.144 0-69.290667-5.205333-93.482666-15.637333-24.170667-10.432-45.034667-28.757333-62.592-55.018667-17.557333-26.24-26.325333-59.84-26.325334-100.8 0-54.613333 15.445333-96.554667 46.314667-125.888 30.890667-29.333333 74.56-43.989333 131.050667-43.989333 44.202667 0 78.954667 8.405333 104.256 25.194666 25.28 16.810667 44.074667 42.602667 56.362666 77.397334l-95.744 20.053333c-3.349333-10.069333-6.869333-17.408-10.538666-22.058667a61.482667 61.482667 0 0 0-22.250667-18.005333 67.328 67.328 0 0 0-29.44-6.314667c-24.576 0-43.413333 9.301333-56.490667 27.904-9.898667 13.802667-14.848 35.477333-14.848 65.024 0 36.608 5.909333 61.696 17.706667 75.264 11.818667 13.589333 28.416 20.373333 49.792 20.373334 20.736 0 36.416-5.482667 47.04-16.426667 10.602667-10.944 18.304-26.858667 23.104-47.701333z"
                                fill="#FFDC96" p-id="10714"></path>
                            <path
                                d="M622.933333 291.861333c18.858667 12.522667 34.112 30.058667 45.738667 52.586667l-34.24 34.197333-50.858667 10.666667c-3.349333-10.069333-6.869333-17.408-10.538666-22.058667a61.482667 61.482667 0 0 0-22.250667-18.005333 67.328 67.328 0 0 0-29.44-6.314667c-24.576 0-43.413333 9.301333-56.490667 27.904-9.898667 13.802667-14.848 35.477333-14.848 65.024 0 36.608 5.909333 61.696 17.706667 75.264 5.525333 6.357333 12.074667 11.221333 19.690667 14.592l-63.637334 63.616c-21.44-10.794667-40.149333-28.117333-56.106666-51.989333-9.92-14.848-17.045333-32.021333-21.333334-51.584l215.893334-215.893333c24.170667 3.84 44.416 11.178667 60.736 21.994666z"
                                fill="#FFECBD" p-id="10715"></path>
                        </svg>
                        <span class="font-mono text-xl z-50 text-orange-300">{{ goldNum }}</span>
                    </div>
                </div>
            </div>
            <div class="w-[43.5rem] h-[25.9rem] top-[11.1rem] left-[5.75rem] rounded-md absolute flex">
                <!-- 左侧菜单 -->
                <ul class="flex flex-col gap-y-5 w-fit h-full p-2 pl-">
                    <li @click="filterType(`全部`)" :class="menuType == `全部` ? `bg-red-400/50` : ``"
                        class="w-16 h-16 border flex flex-col justify-center items-center rounded-full shadow-[1px_1px_10px_2px] shadow-orange-400 hover:scale-105 transition-all active:scale-95">
                        <svg t="1724426499452" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="10099" width="20" height="20">
                            <path
                                d="M533.333333 480H256c-46.933333 0-85.333333-38.4-85.333333-85.333333v-170.666667c0-46.933333 38.4-85.333333 85.333333-85.333333h234.666667c46.933333 0 85.333333 38.4 85.333333 85.333333v213.333333c0 23.466667-19.2 42.666667-42.666667 42.666667z"
                                fill="#2953FF" p-id="10100"></path>
                            <path
                                d="M768 480h-85.333333c-23.466667 0-42.666667-19.2-42.666667-42.666667v-213.333333c0-46.933333 38.4-85.333333 85.333333-85.333333h42.666667c46.933333 0 85.333333 38.4 85.333333 85.333333v170.666667c0 46.933333-38.4 85.333333-85.333333 85.333333z"
                                fill="#FF354A" p-id="10101"></path>
                            <path
                                d="M768 885.333333H533.333333c-46.933333 0-85.333333-38.4-85.333333-85.333333v-213.333333c0-23.466667 19.2-42.666667 42.666667-42.666667h277.333333c46.933333 0 85.333333 38.4 85.333333 85.333333v170.666667c0 46.933333-38.4 85.333333-85.333333 85.333333z"
                                fill="#2953FF" p-id="10102"></path>
                            <path
                                d="M298.666667 885.333333h-42.666667c-46.933333 0-85.333333-38.4-85.333333-85.333333v-170.666667c0-46.933333 38.4-85.333333 85.333333-85.333333h85.333333c23.466667 0 42.666667 19.2 42.666667 42.666667v213.333333c0 46.933333-38.4 85.333333-85.333333 85.333333z"
                                fill="#93A8FF" p-id="10103"></path>
                        </svg>
                        <p class="tracking-widest text-white font-serif">全部</p>
                    </li>
                    <li @click="filterType(`武器`)" :class="menuType == `武器` ? `bg-red-400/50` : ``"
                        class="w-16 h-16 border flex flex-col justify-center items-center rounded-full shadow-[1px_1px_10px_2px] shadow-orange-400 hover:scale-105 transition-all active:scale-95">
                        <svg t="1724426321125" class="icon" viewBox="0 0 1033 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="8884" width="20" height="20">
                            <path
                                d="M350.906063 832.992658l-47.81686-47.808603-103.552278 103.568792 47.511348 47.531991z"
                                opacity=".61" p-id="8885"></path>
                            <path
                                d="M913.899842 73.314782a83.219172 83.219172 0 0 1 30.278782 65.016397l2.113818 163.804329c-0.404598 46.594809-31.517347 107.197787-69.161461 134.665027l-354.382302 289.981059c-37.639986 27.471368-95.402521 22.987764-128.360732-9.974575l-50.236191-50.236191L913.899842 73.314782z"
                                p-id="8886"></path>
                            <path
                                d="M422.053357 588.149031L944.178624 138.32705s-3.951022-50.335275-30.278782-65.012268L422.053357 588.149031z"
                                p-id="8887"></path>
                            <path
                                d="M794.357692 196.816211s-160.489104 117.102178-358.622322 34.522931L332.765217 375.22322s140.395454 45.347988 339.057126-48.506328l122.535349-129.900681z"
                                opacity=".68" p-id="8888"></path>
                            <path
                                d="M671.826472 326.721021L387.480883 611.066609l-122.147265-121.854138 67.431599-113.985123c0-0.004129 160.427176 25.320394 339.061255-48.506327zM473.920324 705.498921s396.538921-260.350459 424.5759-336.45614c28.032851-76.105681-8.108471-184.356249-8.108471-184.356248l53.790871-46.359483V323.430567s-2.510158 60.561692-117.234291 154.432522-321.783275 258.880695-321.783275 258.880695l-31.240734-31.244863z"
                                opacity=".68" p-id="8889"></path>
                            <path
                                d="M296.75188 707.41044a60.949776 56.891412 90 1 0 113.782824 0 60.949776 56.891412 90 1 0-113.782824 0Z"
                                p-id="8890"></path>
                            <path
                                d="M318.092352 695.181676a34.593116 30.245754 90 1 0 60.491507 0 34.593116 30.245754 90 1 0-60.491507 0Z"
                                p-id="8891"></path>
                            <path
                                d="M251.882804 606.690347a20.200993 20.200993 0 0 0-14.342581 6.898806c-9.821819 11.27094-19.540425 23.536861-28.920489 35.418826-28.965903 36.587206-58.885501 74.421233-98.940688 93.020348a20.213378 20.213378 0 0 0-5.775841 32.615541l157.363792 157.372049a20.205121 20.205121 0 0 0 34.21329-10.940656c7.187805-42.676816 48.659084-82.59989 126.791883-122.027537a20.192736 20.192736 0 0 0 4.888202-32.615541l-160.38589-154.147652a20.139064 20.139064 0 0 0-14.891678-5.594184z"
                                fill="#DADAF0" p-id="8892"></path>
                            <path
                                d="M302.07358 733.6515l-77.633244-77.633244-103.572921 103.560535 77.348374 77.356632z"
                                fill="#FFFFFF" opacity=".61" p-id="8893"></path>
                            <path
                                d="M1014.908934 138.223837c0.173399-27.888352-10.577344-54.096384-30.287039-73.822594-19.771623-19.796395-46.074612-30.592552-74.074435-30.390252l-213.966205 1.589491c-53.250031 0.388084-119.422422 34.485774-150.626 77.608473l-246.528075 344.465527c-32.921054 45.45533-27.384669 114.843861 12.373263 154.601792l118.807268 118.819654c39.79096 39.795088 109.134077 45.178717 154.568764 12.022336l0.450012-0.330284 354.8158-290.344371-0.887638 0.681211c42.974072-31.356333 77.001576-97.603038 77.463974-150.803527l-2.109689-164.097456z"
                                fill="#FFFFFF" p-id="8894"></path>
                            <path
                                d="M515.775559 781.369275c-37.024832 0-72.32393-14.065968-96.847514-38.597809l-118.807269-118.819654c-45.253031-45.257159-51.569712-124.195026-14.070096-175.967036l246.474404-344.391212c34.576602-47.779703 105.030299-84.082039 163.936443-84.511408l214.857972-1.589492c32.107729 0 62.295683 12.513633 84.99032 35.23717 22.818493 22.839136 35.290841 53.200489 35.117442 85.494003l2.109688 164.093328c-0.503683 58.452004-36.294079 128.571288-83.31 163.457531l-355.294711 290.666398c-22.034069 16.0807-50.137105 24.928182-79.156679 24.928181z m395.539811-730.844086h-0.65231l-213.962077 1.589491c-47.754932 0.346798-109.38179 32.095344-137.369227 70.775724l-246.478533 344.391212c-28.441577 39.270763-23.65246 99.039774 10.622758 133.314992l118.807268 118.819654c18.376174 18.376174 45.162203 28.920489 73.49231 28.920489 22.075354 0 43.26307-6.593294 59.665797-18.561959l0.070185-0.053671 354.002476-289.675546-0.016515-0.020642 0.887638-0.681211 0.012386 0.016514c38.259268-28.297078 69.702301-89.80008 70.106899-137.187571-0.008257-0.301384-2.080789-161.801983-2.10556-163.68873 0.140371-23.801088-8.897024-45.835156-25.456636-62.411282a86.534397 86.534397 0 0 0-61.626859-25.547464z"
                                fill="#6E6E96" p-id="8895"></path>
                            <path
                                d="M964.429159 73.314782a83.248072 83.248072 0 0 1 30.278782 65.016397l2.105561 163.804329c-0.396341 46.594809-31.513218 107.197787-69.161461 134.665027l-354.386431 289.981059c-37.639986 27.471368-95.398393 22.987764-128.356603-9.974575l-50.236191-50.236191L964.429159 73.314782z"
                                fill="#D6D6ED" p-id="8896"></path>
                            <path
                                d="M472.574417 588.149031L994.707941 138.32705s-3.951022-50.335275-30.278782-65.012268L472.574417 588.149031z"
                                fill="#FFFFFF" p-id="8897"></path>
                            <path
                                d="M844.878752 196.816211s-160.489104 117.102178-358.626451 34.522931L383.273891 375.22322s140.416097 45.347988 339.061255-48.506328l122.543606-129.900681z"
                                fill="#D3D3F2" opacity=".36" p-id="8898"></path>
                            <path
                                d="M722.335146 326.721021l-284.333203 284.34146-133.137463-127.778607 78.409411-108.060654s160.427176 25.324523 339.061255-48.502199z"
                                fill="#CECEED" opacity=".68" p-id="8899"></path>
                            <path
                                d="M524.428998 705.498921s355.261683-301.627697 383.298663-377.733377c28.03698-76.105681 33.177024-143.074882 33.177024-143.074883l53.790871-46.359482V323.430567s-2.510158 60.561692-117.234291 154.432522-321.787404 258.880695-321.787404 258.880695l-31.244863-31.244863z"
                                fill="#FFFFFF" opacity=".68" p-id="8900"></path>
                            <path
                                d="M275.54765 954.442198a36.471606 36.471606 0 0 1-25.952062-10.746614L92.223538 786.323535a36.690419 36.690419 0 0 1-10.18926-32.367828 36.756476 36.756476 0 0 1 20.675776-26.901629c36.463349-16.931181 65.127868-53.142689 92.855207-88.161045 8.550226-10.829185 19.073899-24.160272 29.523257-36.153708a36.855561 36.855561 0 0 1 27.75211-12.587948c9.483278 0 18.491773 3.633124 25.361679 10.226418l160.398276 154.160037a36.756476 36.756476 0 0 1 10.886985 31.905431 36.797762 36.797762 0 0 1-19.775752 27.355769c-72.09686 36.380778-111.780477 73.401481-117.952659 110.025843a36.537663 36.537663 0 0 1-25.039652 28.879204 36.711062 36.711062 0 0 1-11.171855 1.738119z m-22.702894-331.262425c-1.25095 0.053671-2.200517 0.507812-2.856956 1.267465-9.916776 11.382411-20.167964 24.362571-28.404421 34.795415-30.237496 38.19734-61.379145 77.538288-104.943599 97.76818a3.686795 3.686795 0 0 0-2.072532 2.7042c-0.210556 1.197279 0.165142 2.402816 1.007366 3.240912l157.380307 157.388563a3.748723 3.748723 0 0 0 3.736337 0.895895 3.703309 3.703309 0 0 0 2.506029-2.877599c8.129114-48.254486 52.494507-92.091425 135.639365-134.049873a3.67028 3.67028 0 0 0 0.904153-5.940983l-160.406534-154.168294a3.604224 3.604224 0 0 0-2.489515-1.023881z"
                                fill="#6E6E96" p-id="8901"></path>
                            <path
                                d="M188.154514 490.595535c-29.333344 28.990674-29.358115 76.976805-0.053671 106.611534l244.822984 247.626269c29.300316 29.638857 77.269932 30.163183 106.603277 1.160122 29.333344-28.994803 29.353987-76.980934 0.057799-106.611533l-244.822984-247.626269c-29.304444-29.634728-77.282318-30.167311-106.607405-1.160123z"
                                fill="#DADAF0" p-id="8902"></path>
                            <path
                                d="M239.208157 538.296796c-29.325087 28.990674-29.341601 76.980934-0.053671 106.603276l89.358325 92.157482c29.312701 29.642985 77.282318 30.167311 106.615662 1.168379 29.325087-28.998932 29.353987-76.980934 0.041285-106.611533l-89.345939-92.157482c-29.308573-29.642985-77.278189-30.167311-106.615662-1.160122z"
                                fill="#F0F0F0" p-id="8903"></path>
                            <path
                                d="M487.05324 883.918316h-0.004129c-24.957082 0-48.349443-9.759891-65.866878-27.475497l-244.818856-247.626269c-17.253208-17.451379-26.748872-40.591899-26.736487-65.169154 0.012386-24.639183 9.574106-47.651718 26.922272-64.801713 17.067424-16.881639 39.823988-26.179132 64.079216-26.179132 24.957082 0 48.353572 9.755762 65.875136 27.475497l244.827113 247.626269c17.24908 17.44725 26.744744 40.58777 26.732358 65.165025-0.012386 24.643312-9.574106 47.655847-26.922272 64.801713-17.083938 16.885767-39.840503 26.183261-64.087473 26.183261z m-246.424862-398.223369c-15.498575 0-30.010426 5.907954-40.856126 16.638054-11.031484 10.903499-17.108709 25.580493-17.116966 41.335038a59.211657 59.211657 0 0 0 17.19128 41.92542l244.822985 247.626269a59.162114 59.162114 0 0 0 42.37956 17.670192h0.004129c15.494446 0 30.010426-5.912083 40.860254-16.642183 11.027356-10.899371 17.108709-25.576364 17.116966-41.330909a59.228171 59.228171 0 0 0-17.19128-41.92542l-244.822984-247.626269a59.186885 59.186885 0 0 0-42.387818-17.670192z"
                                fill="#6E6E96" p-id="8904"></path>
                            <path
                                d="M54.228497 753.146511c-24.098343 23.825859-19.850066 67.567841 9.454379 97.219083l120.322446 121.693125c29.300316 29.638857 73.001012 34.390817 97.107612 10.569087 24.094215-23.825859 19.833552-67.580227-9.466764-97.214955l-120.326574-121.70551c-29.296187-29.642985-72.984498-34.394946-97.091099-10.56083z"
                                fill="#DADAF0" p-id="8905"></path>
                            <path
                                d="M94.92361 791.054852c-20.262921 20.039979-20.271178 53.192232-0.024772 73.669837l22.31481 24.255229c20.254664 20.485863 53.402788 20.849175 73.678094 0.805067 20.262921-20.039979 20.271178-53.19636 0.033029-73.673966l-22.331324-24.255228c-20.23815-20.477605-53.398659-20.840918-73.669837-0.800939z"
                                fill="#F0F0F0" p-id="8906"></path>
                            <path
                                d="M241.982542 1014.310294c-25.056167 0-50.467389-11.171855-69.722943-30.646222L51.937153 861.970947c-35.77801-36.20325-39.956102-90.287249-9.322265-120.574288 13.013188-12.86456 31.038435-19.95328 50.744001-19.953279 25.04791 0 50.455003 11.171855 69.70643 30.650351l120.322446 121.701382c35.782138 36.186736 39.968488 90.270734 9.334651 120.56603-13.013188 12.868689-31.034306 19.949151-50.739874 19.949151z m-148.623653-259.83439c-7.749287 0-18.817929 1.808305-27.525039 10.412202-17.385322 17.187152-12.992545 51.012357 9.590621 73.868007l120.318317 121.688996c13.09163 13.244387 29.944369 20.840918 46.235626 20.840918 7.749287 0 18.817929-1.808305 27.520911-10.408073 17.381193-17.19128 12.984288-51.012357-9.603006-73.85975l-120.326575-121.705511c-13.083373-13.240258-29.927855-20.836789-46.210855-20.836789z"
                                fill="#6E6E96" p-id="8907"></path>
                            <path
                                d="M491.540973 787.904769c29.333344-29.00306 29.358115-76.980934 0.053671-106.615662L293.911438 481.347584c2.035375 1.659677 4.004693 3.447339 5.899697 5.367115l244.83537 247.626269c29.304444 29.6306 29.279673 77.608473-0.053671 106.603276s-77.315346 28.478734-106.603276-1.160122L390.837394 792.103504c29.523257 24.201557 73.261111 22.929964 100.703579-4.198735zM243.150922 936.817421c19.507396-19.280326 19.528039-51.185757 0.037157-70.899581l-131.481916-132.984707c1.358293 1.11058 2.671172 2.295474 3.926251 3.567067l162.825863 164.691967c19.486754 19.705567 19.470239 51.619254-0.033028 70.903709-19.511525 19.284455-51.421084 18.941785-70.895452-0.776167l-31.368719-31.719646c19.63951 16.117857 48.737527 15.25499 66.989844-2.782642z"
                                fill="#6E6E96" opacity=".15" p-id="8908"></path>
                            <path
                                d="M362.263703 773.351632s-69.198618 35.142213-105.686738 105.707381l37.933112 42.833701s36.640877-96.645215 101.037992-106.087207l-33.284366-42.453875z"
                                fill="#6E6E96" opacity=".15" p-id="8909"></path>
                        </svg>
                        <p class="tracking-widest text-white font-serif">武器</p>
                    </li>
                    <li @click="filterType(`药水`)" :class="menuType == `药水` ? `bg-red-400/50` : ``"
                        class="w-16 h-16 border flex flex-col justify-center items-center rounded-full shadow-[1px_1px_10px_2px] shadow-orange-400 hover:scale-105 transition-all active:scale-95">
                        <svg t="1724326712617" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="15300" width="20" height="20">
                            <path
                                d="M614.956 64.432a19.784 19.784 0 0 0-4.7-15.668 19.792 19.792 0 0 0-14.896-6.764h-166.72a19.792 19.792 0 0 0-14.896 6.764 19.784 19.784 0 0 0-4.7 15.668l8.2 60.452a19.78 19.78 0 0 0 19.596 17.116h150.32a19.78 19.78 0 0 0 19.596-17.116l8.2-60.452z"
                                fill="#FFBB55" p-id="15301"></path>
                            <path
                                d="M483.16 142a19.78 19.78 0 0 0 19.596-17.116l8.2-60.452a19.784 19.784 0 0 0-4.7-15.668 19.792 19.792 0 0 0-14.896-6.764h104c5.708 0 11.14 2.468 14.896 6.764a19.784 19.784 0 0 1 4.7 15.668l-8.2 60.452a19.78 19.78 0 0 1-19.596 17.116h-104z"
                                fill="#FF885F" p-id="15302"></path>
                            <path
                                d="M670 172c0-20.972-17.028-38-38-38H392c-20.972 0-38 17.028-38 38s17.028 38 38 38h240c20.972 0 38-17.028 38-38z"
                                fill="#51FFFF" p-id="15303"></path>
                            <path
                                d="M506 172c0-20.972-17.028-38-38-38H392c-20.972 0-38 17.028-38 38s17.028 38 38 38h76c20.972 0 38-17.028 38-38z"
                                fill="#D3FAFF" p-id="15304"></path>
                            <path
                                d="M616 302.74c154.764 48.012 268 200.42 268 380.8 0 104.128-37.736 198.936-99.416 269.72-15.92 18.12-38.172 28.4-61.46 28.4-89.544 0.34-332.704 0.34-422.248 0.34-23.38 0-45.712-10.32-61.696-28.508C177.736 882.476 140 787.668 140 683.54c0-180.38 113.236-332.788 268-380.8V206h208v96.74z"
                                fill="#6DF0FF" p-id="15305"></path>
                            <path d="M396 201.736h236v55.428H396z" fill="#3AC4FB" p-id="15306"></path>
                            <path
                                d="M332.852 939.936a84.528 84.528 0 0 1-62.992-28.16C219.052 854.268 188 778.764 188 696.064c0-178.82 145.18-324 324-324s324 145.18 324 324c0 82.7-31.052 158.204-82.12 215.48a84.192 84.192 0 0 1-62.732 28.044c-79.872 0.348-278.424 0.348-358.296 0.348z"
                                fill="#6DF0FF" p-id="15307"></path>
                            <path
                                d="M831.06 639.452A325.216 325.216 0 0 1 836 696.064c0 82.7-31.052 158.204-82.12 215.48a84.192 84.192 0 0 1-62.732 28.044c-79.872 0.348-278.424 0.348-358.296 0.348a84.528 84.528 0 0 1-62.992-28.16C219.052 854.268 188 778.764 188 696.064c0-16.32 1.208-32.36 3.544-48.036 37.424-19.32 88.944-38.028 148.136-38.028 122.4 0 146.044 104 304 104 96.712 0 155.968-41.988 187.38-74.548z"
                                fill="#00BC73" p-id="15308"></path>
                            <path
                                d="M831.244 640.496A325.36 325.36 0 0 1 836 696.064c0 82.7-31.052 158.204-82.12 215.48a84.192 84.192 0 0 1-62.732 28.044c-79.872 0.348-278.424 0.348-358.296 0.348a84.528 84.528 0 0 1-62.992-28.16C219.052 854.268 188 778.764 188 696.064c0-17.104 1.328-33.9 3.888-50.292C221.896 674.124 282.196 714 384 714c157.956 0 181.596-104 304-104 54.94 0 104.88 14.504 143.244 30.496z"
                                fill="#00D373" p-id="15309"></path>
                            <path
                                d="M835.848 686.064c0.1 3.32 0.152 6.656 0.152 10 0 82.7-31.052 158.204-82.12 215.48a84.192 84.192 0 0 1-62.732 28.044c-79.872 0.348-278.424 0.348-358.296 0.348a84.528 84.528 0 0 1-62.992-28.16C219.052 854.268 188 778.764 188 696.064c0-3.344 0.052-6.68 0.152-10 2.392 78.78 32.956 150.532 81.708 205.712a84.528 84.528 0 0 0 62.992 28.16c79.872 0 278.424 0 358.296-0.348 23.948 0 46.76-10.2 62.732-28.044 49.004-54.96 79.576-126.7 81.968-205.48z"
                                fill="#00AB81" p-id="15310"></path>
                            <path
                                d="M271.112 453.86c66.292-78.796 164.928-105.068 220.124-58.628s46.184 148.112-20.108 226.908c-66.296 78.796-164.928 105.068-220.124 58.628s-46.188-148.112 20.108-226.908z"
                                fill="#FFFFFF" fill-opacity=".4" p-id="15311"></path>
                            <path d="M348 486m-36 0a36 36 0 1 0 72 0 36 36 0 1 0-72 0Z" fill="#FFFFFF" p-id="15312">
                            </path>
                        </svg>
                        <p class="tracking-widest text-white font-serif">药水</p>
                    </li>
                    <!-- <li
                        class="w-16 h-16 border flex flex-col justify-center items-center rounded-full shadow-[1px_1px_10px_2px] shadow-orange-400 hover:scale-105 transition-all active:scale-95">
                        <svg t="1724426558594" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="14627" width="20" height="20">
                            <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#F0F5FF"
                                opacity=".8" p-id="14628"></path>
                            <path d="M358.4 512m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" fill="#3956EE"
                                p-id="14629"></path>
                            <path d="M537.6 512m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" fill="#3956EE"
                                p-id="14630"></path>
                            <path d="M742.4 512m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" fill="#FFBA69"
                                p-id="14631"></path>
                            <path
                                d="M512 204.8c84.3264 0 163.2768 34.176 220.7488 93.568a25.6 25.6 0 1 1-36.7872 35.6096A255.1296 255.1296 0 0 0 512 256c-141.3888 0-256 114.6112-256 256s114.6112 256 256 256a255.0528 255.0528 0 0 0 179.968-73.9328 25.6 25.6 0 1 1 35.9936 36.4032A306.2528 306.2528 0 0 1 512 819.2c-169.6512 0-307.2-137.5488-307.2-307.2S342.3488 204.8 512 204.8z"
                                fill="#484C63" p-id="14632"></path>
                        </svg>
                        <p class="tracking-widest text-white font-serif">其他</p>
                    </li> -->
                </ul>
                <!-- 右侧背包 -->
                <ul class="grid grid-cols-4 gap-2 z-10 w-1/2 max-h-[96%] pl-4 pt-2 pr-2 overflow-auto scrollable">
                    <li v-for="(item, index) in backpackList" :key="item.articleId" :class="goodsWorth(item.worth)"
                        class="w-[3.9rem] h-[3.9rem] border-2 rounded-md hover:border-green-500 transition-all"
                        @click="clickBackItem(item, index)">
                        <div class="w-full h-full rounded-md flex flex-col items-center justify-center">
                            <img v-if="item.img" :src="`/api` + item.img" class="w-12">
                        </div>
                    </li>
                </ul>
                <!-- 物品介绍 -->
                <div v-if="backpackList.length > 0"
                    class="w-1/2 h-full px-1 relative -top-1 flex flex-col items-center justify-center">
                    <img src="../assets/imgs/detail.png" class="w-full h-full">
                    <div class="flex justify-center items-center absolute -top-3 w-3/4 h-36 gap-x-3">
                        <img :src="`/api` + backpackItem.img" class="w-20 h-20 -z-0 rounded-md"></img>
                        <div class="font-bold font-serif flex-1">
                            <p class="text-green-700 text-xl font-black">{{ backpackItem.name }}</p>
                            <p>数量：{{ backpackItem.num }}</p>
                            <p>售价：{{ backpackItem.worth }}</p>
                        </div>
                    </div>
                    <div class="absolute top-[4.5rem] w-full h-fit flex flex-col items-center justify-center">
                        <img src="../assets/imgs/detailBg.png" class="w-[88%] h-64 opacity-55">
                        <p
                            class="absolute w-[80%] h-36 line-clamp-6 indent-8 top-20 left-8 font-serif -rotate-3 font-black p-1">
                            {{ backpackItem.description }}
                        </p>
                    </div>
                    <div class="absolute bottom-6 grid place-items-center w-32 transition-all active:scale-90"
                        @click="showSellDialog">
                        <img src="../assets/imgs/btn2.png" class="w-full opacity-75">
                        <p class="absolute tracking-widest text-xl text-white font-mono font-black">出售</p>
                    </div>
                </div>
                <!-- 出售物品对话框 -->
                <div v-if="sellDialog"
                    class="absolute sell top-0 left-0 w-full h-full rounded-md backdrop-blur-sm z-50 flex justify-center items-center">
                    <div class="w-1/2 h-44 rounded-md relative">
                        <img src="../assets/imgs/btn2.png" class="h-full">
                        <p class="absolute top-4 left-1/2 -translate-x-1/2 font-serif font-black text-lg text-white">
                            出售物品数量</p>
                        <el-input-number class="absolute -top-[7.2rem] left-1/2 -translate-x-1/2" v-model="sellNum"
                            :min="1" :max="backpackItem.num" />
                        <div class=" absolute bottom-5 left-14 grid place-items-center w-28 transition-all
                            active:scale-90" @click="sellDialog = false">
                            <img src="../assets/imgs/btn2.png" class="w-full opacity-75">
                            <p class="absolute tracking-widest text-xl text-white font-mono font-black">取消</p>
                        </div>
                        <div class="absolute bottom-5 left-48  grid place-items-center w-28 transition-all active:scale-90"
                            @click="sellArticle">
                            <img src="../assets/imgs/btn2.png" class="w-full opacity-75">
                            <p class="absolute tracking-widest text-xl text-white font-mono font-black">出售</p>
                        </div>
                    </div>
                </div>
                <!-- 删除物品对话框 -->
                <div v-if="delDialog"
                    class="absolute sell top-0 left-0 w-full h-full rounded-md backdrop-blur-sm z-50 flex justify-center items-center">
                    <div class="w-1/2 h-40 rounded-md relative text-center">
                        <img src="../assets/imgs/btn2.png" class="h-full">
                        <p class="absolute top-6 left-1/2 -translate-x-1/2 font-serif font-black text-lg text-white">
                            物品数量不足,是否删除该物品？</p>
                        <div class="absolute bottom-5 left-10 grid place-items-center w-28 transition-all
                            active:scale-90" @click="delDialog = false">
                            <img src="../assets/imgs/btn2.png" class="w-full opacity-75">
                            <p class="absolute tracking-widest text-xl text-white font-mono font-black">取消</p>
                        </div>
                        <div @click="delArticle"
                            class="absolute bottom-5 left-44  grid place-items-center w-28 transition-all active:scale-90">
                            <img src="../assets/imgs/btn2.png" class="w-full opacity-75">
                            <p class="absolute tracking-widest text-xl text-white font-mono font-black">确定</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup lang="ts">
import { getbackpackApi, sellbackpackApi, deletebackpackApi } from "../api"
import type { backpackItemType } from "../types"
import { goodsWorth } from "../hooks"
import { ref, onMounted, nextTick } from "vue"
import { ElMessage } from "element-plus";
const emit = defineEmits(['showName'])
const listIndex = ref(0)
const sellNum = ref(1)
const menuType = ref('全部')
const sellDialog = ref(false)
const delDialog = ref(false)
const backpackList = ref<backpackItemType[]>([])
const backpackListCopy = ref<backpackItemType[]>([])
const backpackItem = ref({} as backpackItemType)
const goldNum = ref(0)
onMounted(() => {
    getBackpackArticle()
})
// 获取背包物品
const getBackpackArticle = () => {
    getbackpackApi().then(res => {
        goldNum.value = res[0].num
        backpackList.value = res
        backpackItem.value = res[listIndex.value]
        Object.assign(backpackListCopy.value, res)
        while (res.length < 20) {
            res.push({} as backpackItemType)
        }
    })
}
// 点击背包物品
const clickBackItem = (item: backpackItemType, index: number) => {
    if (!item.articleId) {
        return
    }
    backpackItem.value = item
    listIndex.value = index
}
// 筛选物品类型
const filterType = (type: string) => {
    menuType.value = type
    nextTick(() => {
        if (type === '全部') {
            backpackList.value = backpackListCopy.value
        } else {
            backpackList.value = backpackListCopy.value
            backpackList.value = backpackList.value.filter(item => item.type == type)
        }
        listIndex.value = 0
        backpackItem.value = backpackList.value[listIndex.value]
        while (backpackList.value.length < 20) {
            backpackList.value.push({} as backpackItemType)
        }

    })
}
// 显示出售对话框
const showSellDialog = () => {
    if (backpackItem.value.articleId === 1 && backpackItem.value.name == "金币") {
        ElMessage.warning("金币不能出售！")
    } else if (backpackItem.value.num == 0) {
        delDialog.value = true
    } else {
        sellDialog.value = true
    }
}
// 出售物品
const sellArticle = () => {
    sellbackpackApi(backpackItem.value.articleId, sellNum.value).then(res => {
        if (res.code === 200) {
            getBackpackArticle()
            ElMessage.success(res.msg)
        }
        sellDialog.value = false
    })
}
// 删除背包空物品
const delArticle = () => {
    deletebackpackApi(backpackItem.value.articleId).then(res => {
        if (res.code === 200) {
            getBackpackArticle()
            ElMessage.success(res.msg)
        }
        delDialog.value = false
    })
}
</script>
<style scoped>
.box {
    background: url("../assets/imgs/bag.png") no-repeat center center;
}

.sprite {
    background: url("../assets/imgs/gold.png") center center;
}

.item1 {
    background-position: -18px 17px;
}

.item2 {
    background-position: -230px 17px;
}

.item3 {
    background-position: -444px 13px;
}

.item4 {
    background-position: -20px -147px;
}

.item5 {
    background-position: -227px -143px;
}

.item6 {
    background-position: -437px -153px;
}

.sell {
    animation: sclade .3s ease-in-out;
}

@keyframes sclade {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}
</style>
